<template>
  <div
    class="jay-desktop-app-item"
    draggable="true"
    :id="id"
    @dragstart="onDragstart"
    :style="{
      left: `${left}px`,
      top: `${top}px`,
    }"
  >
    <div class="jay-desktop-app-item-icon">
      <img :src="icon" :alt="label" draggable="false">
    </div>
    <div class="jay-desktop-app-item-label">
      <span>{{label}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AppItem",
    props:{
      id:{
        type:String,
        required:true
      },
      icon:{
        type:String,
        required:true
      },
      label:{
        type:String,
        required:true
      },
      left:{
        type:[String,Number],
        required:true
      },
      top:{
        type:[String,Number],
        required:true
      }
    },
    methods:{
      onDragstart(e){
        console.log("开始拖拽")
        e.dataTransfer.setData("text", this.id);
      },
      // ondblclick(){
      //   console.log("双击")
      // }
    }
  }
</script>

<style lang="scss">
  .jay-desktop-app-item{
    width: 76px;
    height: 89px;
    position: absolute;
    border: 1px solid transparent;
    border-radius: 5px;
    z-index: 10;
    &:hover{
      border-color:rgb(88, 137, 215);
      background: rgba(45,45,45,0.3);
    }
    &-icon{
      width: 74px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events:none;
      &>img{
        width: 36px;
        height: 36px;
      }
    }
    &-label{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 74px;
      height: 37px;
      color: #ffffff;
      font-size: 12px;
      padding: 5px 0 3px;
      box-sizing: border-box;
      pointer-events:none;
    }
  }
</style>